<template>
<div>
    <div class="bread">
        当前位置：
        <span @click="GoTips" class="break">网上举报 ></span>
        <span class="color-blue">实名认证</span>
    </div>
    <div class="report-body">
        <div>
            <img :src="smrzPic" alt />
        </div>

        <div class="report-text">
            <div class="text-title">
                请输入姓名及身份证号，或点击
                <div class="text-img-box">
                    <img :src="sfzPic" alt class="text-img1" />
                </div>上传身份证图片OCR输入
            </div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="username">
                    <el-input type="username" v-model="ruleForm.username" autocomplete="off" placeholder="请输入姓名" maxlength="50" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="userID">
                    <el-input v-model="ruleForm.userID" placeholder="请输入身份证号" maxlength="50"></el-input>
                </el-form-item>
                <div>
                    <div type="button" class="text-input-button" @click="GoAuthentication" v-on:keyup.enter="GoAuthentication">
                        <img :src="orcPic" alt />
                        <span class="text-button-text">开始核验</span>
                    </div>
                </div>
            </el-form>
        </div>

        <!--<Start-verification></Start-verification>-->
    </div>
</div>
</template>

<script>
import StartVerification from "@/components/SigndeReport/StartVerification.vue";
export default {
    components: {
        StartVerification
    },
    data() {
        //定义姓名的规则
        var validateName = (rule, value, callback) => {
            var uPattern = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{1,20}$/;
            // let res = uPattern.test(value)
            if (value === "") {
                callback(new Error("姓名不能为空"));
            } else if (!uPattern.test(value)) {
                callback(new Error("请重新输入"));
            } else {
                callback();
            }
        };
        //定义身份证的规则
        var validateNameID = (rule, value, callback) => {
            // var uPattern = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;

            var uPattern = /^[0-9]{14,17}(\d|X|x)$/
            let res = uPattern.test(value)
            if (value === "") {
                callback(new Error("身份证号不能为空"));
            } else if (!res) {
                callback(new Error("请输入正确的身份证号"));
            } else {
                callback()
            }
        };
        return {
            smrzPic: require("@/assets/image/wsjb-smrz-1.png"),
            sfzPic: require("@/assets/image/身份证.png"),
            orcPic: require("@/assets/image/orc.png"),
            ruleForm: {
                username: "",
                userID: ""
            },
            rules: {
                username: [{
                    required: true,
                    message: '姓名不能为空',
                    trigger: "blur"
                }],
                userID: [{
                    required: true,
                    validator: validateNameID,
                    trigger: "blur"
                }]
            }
        };
    },
    methods: {
        GoTips() {
            this.$router.push({
                name: "Tips"
            });
        },
        GoAuthentication() {
            // this.$router.push({ name: "Authentication" });
            this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    sessionStorage.setItem("username", this.ruleForm.username)
                    sessionStorage.setItem("userID", this.ruleForm.userID)
                    this.$router.push({
                        name: "Authentication",
                        params: {
                            ruleForm: this.ruleForm
                        }
                    });
                } else {
                    // console.log("error submit!!");
                    return false;
                }
            });
        },
    },
    created() {
        let g = this
        document.onkeydown = function (e) {
            let key = window.event.keyCode;
            if (key == 13) {
                g.GoAuthentication()
            }
        }
    },
};
</script>

<style lang="less" scoped>
.bread {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 62px;
    background: rgba(242, 242, 242, 1);
}

.color-blue {
    color: #0074dd;
}

.break:hover {
    color: red;
    cursor: pointer;
}

.report-body {
    padding: 54px 40px;
    height: 702px !important;
}

/**body部分代码可抽成组件 */
.text-title {
    width: 491px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 38px;
    padding-left: 60px;
}

.text-img-box {
    display: inline-block;
    height: 25px;
}

.text-img1 {
    position: relative;
    top: 3px;
}

.report-text {
    width: 600px;
    margin: 0 auto;
    margin-top: 81px;
}

.report-text span {
    display: inline-block;
}

.text-width-96px {
    width: 96px;
    text-align: right;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-right: 33px;
}

.text-width-96px::before {
    content: "* ";
    color: red;
}

.text-input {
    width: 410px;
    height: 38px;
    border-radius: 4px;
    border: 1px solid rgba(221, 221, 221, 1);
    outline: none;
    padding-left: 10px;
    margin-bottom: 20px;
}

.text-input-button {
    display: inline-block;
    width: 234px;
    height: 52px;
    background: rgba(20, 123, 253, 1);
    box-shadow: 0px 4px 12px 0px rgba(20, 123, 253, 0.6);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 129px;
    cursor: pointer;
}

.text-button-text {
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 28px;
    margin-left: 8px;
}

/**饿了么ui样式修改 */
/deep/.el-form-item__label::before {
    content: "* ";
    color: red;
}

/deep/.el-input__inner {
    width: 410px;
    height: 38px;
    border-radius: 4px;
    border: 1px solid rgba(221, 221, 221, 1);
    padding-left: 10px;
    padding-right: 0;
}

/deep/.el-form-item__label {
    margin-right: 33px;
    padding: 0px;
}

/deep/.el-input {
    width: 420px;
}

/deep/.el-form-item__error {
    left: 33px;
}

/deep/.el-button--primary {
    width: 234px;
    height: 52px;
    background: rgba(20, 123, 253, 1);
    box-shadow: 0px 4px 12px 0px rgba(20, 123, 253, 0.6);
    border-radius: 5px;
}

/deep/.text-input-button {
    margin-top: 40px;
    margin-left: 133px;
}
</style>
